<template>
  <el-container v-if="isMounted" class="app-container">
    <!-- 头部导航栏 -->
    <el-header class="app-header">
      <div class="header-left">
        <div class="logo-container">
          <el-icon class="app-icon"><Phone /></el-icon>
          <h1 class="app-title">东软环保公众监督平台管理系统</h1>
        </div>
      </div>
      <div class="header-right">
        <div class="user-info-container">
          <p v-if="admins" class="admin-info">系统管理员：{{ admins.adminCode || '未定义' }}</p>
          <el-button v-if="admins" type="danger" size="small" @click="out" class="logout-btn">
            <span>退出</span>
            <el-icon class="logout-icon"><DArrowRight /></el-icon>
          </el-button>
        </div>
      </div>
    </el-header>

    <!-- 主体内容区 -->
    <el-container class="app-body">
      <!-- 侧边栏导航 -->
      <el-aside v-if="!isMobile" class="app-aside" width="200px">
        <div class="aside-header">
          <h3 class="aside-title">系统菜单</h3>
        </div>
        <el-menu
          class="app-menu"
          active-text-color="#ffd04b"
          background-color="#1a73e8"
          text-color="#fff"
          router
          :collapse="isCollapsed"
          @collapse-change="handleCollapse"
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon class="menu-icon"><ChatDotRound /></el-icon>
              <span v-if="!isCollapsed">公众监督数据管理</span>
            </template>
            <el-menu-item index="/index/feedbackList">公众监督数据列表</el-menu-item>
            <el-menu-item index="/index/statisticsList">确认AQI数据列表</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon class="menu-icon"><DocumentCopy /></el-icon>
              <span v-if="!isCollapsed">统计数据管理</span>
            </template>
            <el-menu-item index="/index/provinceItemTotalStatis">省分组检查统计</el-menu-item>
            <el-menu-item index="/index/aqiDistributeTotalStatis">AQI指数分布统计</el-menu-item>
            <el-menu-item index="/index/aqiTrendTotalStatis">AQI指数趋势统计</el-menu-item>
            <el-menu-item index="/index/otherTotalStatis">其它数据统计</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon class="menu-icon"><DocumentCopy /></el-icon>
              <span v-if="!isCollapsed">可视化</span>
            </template>
            <el-menu-item index="/index/ChartsVue">可视化分析</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <!-- 主内容区 -->
      <el-main class="app-main">
        <router-view v-if="isRouterReady" />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import {
  Phone,
  DArrowRight,
  ChatDotRound,
  DocumentCopy,
} from "@element-plus/icons-vue";
import { getSessionStorage, removeSessionStorage } from '../common.js';
import { useRouter } from 'vue-router';
import { ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';

// 响应式数据
const admins = ref(null);
const router = useRouter();
const isCollapsed = ref(false);
const isMobile = ref(false);
const isMounted = ref(false);
const isRouterReady = ref(false);

// 退出登录
const out = () => {
  removeSessionStorage('admins');
  admins.value = null;
  router.push('/login');
};

// 菜单折叠处理
const handleCollapse = (collapsed) => {
  isCollapsed.value = collapsed;
};

// 自适应处理
const handleWindowResize = () => {
  isMobile.value = window.innerWidth < 768;
  if (isMobile.value) {
    isCollapsed.value = true;
  }
};

// 生命周期初始化
onMounted(async () => {
  await nextTick();

  admins.value = getSessionStorage('admins') || null;
  handleWindowResize();
  window.addEventListener('resize', handleWindowResize);

  isMounted.value = true;

  if (router.currentRoute.value) {
    isRouterReady.value = true;
  } else {
    const unsubscribe = router.afterEach(() => {
      isRouterReady.value = true;
      unsubscribe();
    });
  }
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleWindowResize);
});

// 登录状态监听
watch(admins, (newVal) => {
  if (!newVal) {
    router.push('/login');
  }
});
</script>


<style scoped>
/* 基础布局样式 */
.app-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* 头部样式优化 */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #409eff 0%, #3a8ee6 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 0 30px;
  color: #fff;
  user-select: none;
  position: relative;
  z-index: 100;
  transition: all 0.3s ease;
}

.header-left, .header-right {
  display: flex;
  align-items: center;
  height: 100%;
}

.logo-container {
  display: flex;
  align-items: center;
}

.app-icon {
  font-size: 38px;
  margin-right: 15px;
  color: #fff;
  transition: transform 0.3s ease, color 0.3s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.app-icon:hover {
  transform: scale(1.1);
  color: #ffd04b;
}

.app-title {
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 1px;
  color: #fff;
  margin: 0;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.user-info-container {
  display: flex;
  align-items: center;
}

.admin-info {
  font-size: 16px;
  margin-right: 25px;
  color: #e3f2fd;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  background-color: #f44336;
  border-color: #f44336;
  transition: all 0.3s ease;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-weight: 500;
}

.logout-btn:hover {
  background-color: #d32f2f;
  border-color: #d32f2f;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(244, 67, 54, 0.3);
}

.logout-icon {
  margin-left: 8px;
}

/* 侧边栏样式优化 */
.app-aside {
  background: linear-gradient(180deg, #1a73e8 0%, #1565c0 100%);
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}

.aside-header {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.aside-title {
  font-weight: 600;
  font-size: 18px;
  color: #fff;
  margin: 0;
}

.app-menu {
  border-right: none;
  height: calc(100% - 60px);
}

.app-menu .el-sub-menu__title,
.app-menu .el-menu-item {
  height: 50px;
  line-height: 50px;
  padding-left: 30px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.app-menu .el-sub-menu__title:hover,
.app-menu .el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  padding-left: 35px;
}

.app-menu .el-sub-menu__title {
  font-weight: 500;
}

.app-menu .el-icon {
  width: 24px;
  text-align: center;
  margin-right: 15px;
  font-size: 18px;
  color: #fff;
}

.menu-icon {
  transition: color 0.3s ease;
}

.app-menu .el-menu-item.active .menu-icon,
.app-menu .el-sub-menu__title:hover .menu-icon {
  color: #ffd04b;
}

/* 主内容区样式 */
.app-main {
  background-color: #f8f9fa;
  padding: 30px;
  overflow-y: auto;
  transition: padding 0.3s ease;
}

/* 页脚样式优化 */
.app-footer {
  background: linear-gradient(135deg, #409eff 0%, #3a8ee6 100%);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  z-index: 10;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.footer-logo {
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  margin-bottom: 5px;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.footer-copyright {
  font-size: 14px;
  color: #e3f2fd;
  letter-spacing: 0.5px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app-header {
    padding: 0 15px;
    flex-direction: column;
    text-align: center;
    height: auto;
  }

  .header-left, .header-right {
    flex-direction: column;
    justify-content: center;
    height: auto;
    width: 100%;
  }

  .logo-container {
    margin: 10px 0;
  }

  .app-title {
    font-size: 24px;
  }

  .admin-info {
    margin: 10px 0;
  }

  .app-aside {
    width: 100%;
    position: relative;
    z-index: 9;
  }

  .app-main {
    padding: 15px;
  }

  .footer-logo {
    font-size: 14px;
  }

  .footer-copyright {
    font-size: 12px;
  }
}
</style>